<template>
  <div class="depthButton">depth button</div>
</template>
<style scoped>
/*案例来源https://cssfx.dev*/
.depthButton {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background-color: hsl(236, 32%, 26%);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.depthButton:hover {
  color: #5778f3;
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
</style>